<template>
<div class="login" @click.stop>
  <h2>轻松登录，马上抽大奖</h2>
  <div class="form">
    <ul>
      <li><input type="tel" v-model="form.phone" maxlength="11" placeholder="输入手机号"></li>
      <li><input type="tel" v-model="form.code" maxlength="6" placeholder="输入验证码"><button class="btnStyle btn2" @click="getCodeFn">{{codeTime>=60?'获取验证码':codeTime+'s'}}</button></li>
      <li class="sex">
        <label>性别</label>
        <dl>
          <dd :class="{'curr':form.sex===0}" @click="form.sex=0">男</dd>
          <dd :class="{'curr':form.sex===1}" @click="form.sex=1">女</dd>
        </dl>
      </li>
    </ul>
  </div>
  <button class="btnStyle btn1" @click="loginFn">开始抽奖</button>
</div>
</template>

<script>
import {mapMutations} from 'vuex';
export default{
  data:()=>{
    return{
      codeTime:60,
      form:{
        phone:'',
        code:'',
        sex:''
      }
    }
  },
  mounted(){
    this.$nextTick(()=>{
      let oInput=document.getElementsByTagName('input'),
          oTime;
      for(let i=0;i<oInput.length;i++){
        oInput[i].addEventListener('blur',()=>{
          console.log(oInput[i]);
          oTime=setTimeout(()=>{
            window.scrollTo(0,0);
          },100);
        });
        oInput[i].addEventListener('focus',()=>{
          clearTimeout(oTime);
        });
      }
    });
  },
  methods:{
    ...mapMutations(['homePopEdit']),
    loginFn(){
      for(let i in this.form){
        if(this.form[i]===''){
          Toast('请填写完整信息');
          return false;
        }
      }
      if(this.$route.query.phone){
        this.form.parent=this.$route.query.phone;
      }
      this.http(this.api.login,this.form).then(res=>{
        switch(parseInt(res.data.code,10)){
          case 0:
            Toast('登录成功！');
            localStorage.setItem('token',res.data.token);
            localStorage.setItem('phone',this.form.phone);
            this.$router.push({name:'home',query:{phone:this.form.phone}});
            this.homePopEdit(0);
            break;
          default:
            Toast(res.data.msg);
        }
      });
    },
    getCodeFn(){
      if(this.form.phone.length<11){
        Toast('输入手机格式错误！');
        return false;
      }
      if(this.codeTime<60){
        return false;
      }
      this.http(this.api.getcode,{
        phone:this.form.phone
      }).then(res=>{
        switch(parseInt(res.data.code,10)){
          case 0:
            this.codeTime--;
            let oTime=setInterval(()=>{
              if(this.codeTime==1){
                this.codeTime=60;
                clearInterval(oTime);
                return false;
              }
              this.codeTime--;
            },1000);
            break;
          default:
            Toast(res.data.msg);
        }
      });
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
.login{
  width:348px;
  background:url('~@img/loginBg.png') center top no-repeat #FFF;
  background-size:100% auto;
  border-radius:14px;
  padding:0 24px 45px;
  box-sizing: border-box;
  h2{
    color:$c02;
    margin:58px 0 0;
    font-size:16px;
  }
  .form{
    margin-top:20px;
    ul{
      li{
        display:flex;
        margin-bottom:20px;
        input{
          width:100%;
          flex:1;
          height:50px;
          box-shadow:0 4px 10px 2px rgba(210,210,210,0.32);
          border-radius:99em;
          font-size:14px;
          padding-left:20px;
        }
        .btn2{
          margin-left:20px;
        }
        &.sex{
          display:flex;
          font-weight:bold;
          padding-left:8px;
          dl{
            display:flex;
            line-height:18px;
            dd{
              margin-left:50px;
              &:after{
                vertical-align:-5px;
                margin-left:10px;
                width:16px;
                height:16px;
                content:'';
                display:inline-block;
                border:1px solid #000;
                border-radius:50%;
              }
              &.curr{
                color:$c02;
                &:after{
                  border-color:$c02;
                  background-color:$c02;
                  box-shadow:0 0 0 3px #FFF inset;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
